<template>
	<view class="dynamic-item bg-white">
		<view class="header">
			<navigator class="clear" :url="`/pages/life-circle/personal-dynamics/index?uid=${dynamicDate.uid}`" hover-class="none">
				<image class="avatar pull-left" :src="dynamicDate.portrait"></image>
				<view class="info pull-left">
					<view class="name bold">{{dynamicDate.name}}</view>
					<view class="other gray">
						<text>{{dynamicDate.time}}</text>
						<text class="spot">·</text>
						<text>{{dynamicDate.address}}</text>
					</view>
				</view>
				<text v-if="isSelf" @click.stop="handleShowActions" class="iconfontPT icongengduo pull-right"></text>
			</navigator>
		</view>
		<navigator :url="'/pages/life-circle/circle-chat-detail/index?id='+dynamicDate.id" hover-class="none">
			<view class="body flex-x-start">
				<view class="w100 u-line-2">
					{{dynamicDate.content}}
				</view>
				<view v-if="host">
					<image @click.stop="handlePreviewImage(index)" :class="{'image':true,'is-one':isOneImage}" mode="aspectFill" v-for="(photo, index) in dynamicDate.img" :key="index" :src="host+photo"></image>
				</view>
			</view>
			<view class="footer">
				<view class="top">
					<text :class="{'iconfontPT like-icon': true, 'icondianzan-xuanzhong': dynamicDate.dz_state, 'icondianzan-weixuanzhong': !dynamicDate.dz_state }" @click.stop="handleLike"></text>
					<text class="iconfontPT iconpinglun comment-icon"></text>
				</view>
				<view :class="{ 'bottom flex-x-between': true, 'man-border-color': isMan, 'woman-border-color': isWoman }">
					<view class="">
						<text class="like">{{dynamicDate.fabulous}}赞</text>
						<text class="spot">·</text>
						<text class="comment">{{dynamicDate.comment}}评论</text>
					</view>
					<view class="type"></view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import {
		addLike,
		deleteLike
	} from '../../.././apis/life-circle/index.js';

	export default {
		props: ['dynamicDate', 'index', 'isMan', 'isWoman', 'isSelf', 'showAction'],
		computed: {
			host() {
				return this.$baseHost.car
			},
			isOneImage() {
				return this.dynamicDate.img.length === 1
			}
		},
		methods: {
			handlePreviewImage(current){
				const urls = this.dynamicDate.img.map(item=>this.host + item)
				uni.previewImage({current,urls})
			},
			handleShowActions() {
				this.$emit('onShowActions', !this.showAction, this.dynamicDate.id)
			},
			handleLike() {
				let isLike = this.dynamicDate.dz_state,
					params = {
						hfid: '',
						pid: '',
						cid: this.dynamicDate.id,
					};

				if (isLike) {
					this.$loading.show()
					deleteLike(params).then(res => {
						if (+res.code === 200) {
							this.$loading.hide()
							this.$emit('likeStateChange', this.index, false)
						}
					})
				} else {
					this.$loading.show()
					addLike(params).then(res => {
						if (+res.code === 200) {
							this.$loading.hide()
							this.$emit('likeStateChange', this.index, true)
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.dynamic-item {

		padding: 35rpx 30rpx 0rpx 30rpx;
		margin-bottom: 12rpx;

		.header {
			margin-bottom: 20rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
			}

			.info {
				margin-left: 30rpx;
				width: 580rpx;

				.name {
					font-size: 30rpx;
				}

				.other {
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}
		}


		.image {
			width: calc((100vw - 60rpx) / 3);
			height: calc((100vw - 60rpx) / 3);
			padding: 10rpx;
			box-sizing: border-box;
			&.is-one {
				width: 50vw;
				height: 50vw;
			}
		}

		.footer {
			padding: 0 0 12rpx 0;
			color: #666666;

			.top {
				padding: 12rpx 0;

				.iconfontPT.comment-icon,
				.iconfontPT.like-icon {
					color: #333333;
				}

				.iconfontPT.icondianzan-xuanzhong {
					color: #E41805;
				}

				.comment-icon {
					font-size: 34rpx;
					margin-left: 80rpx;
				}
			}

			.bottom {
				border-top: 1rpx solid #F5F5F5;
				padding: 10rpx 0;
				font-size: 24rpx;
			}
		}
	}
</style>
